import React, { useEffect } from 'react'
import { Col, Row } from 'antd';
import Jiankong from '@/component/Jiankong';
import { getUserInfo } from '@/api';
import Hoc_login from '@/utils/Hoc_login';

function Anfang() {

  useEffect(() => {
    getUserInfo().then(res => {
      if (res.code === 1) {
        // message.success(res.msg)
      }
    })
  }, [])
  const data = [
    {
      key: '1',
      name: '张三',
      address: '周一 08:00~20:00',
      zb: '1号楼',
    },
    {
      key: '2',
      name: '李四',
      address: '周二 08:00~20:00',
      zb: '2号楼'
    },
    {
      key: '3',
      name: '王五',
      address: '周三 08:00~20:00',
      zb: '3号楼'
    },
    {
      key: '4',
      name: '赵六',
      address: '周四 08:00~20:00',
      zb: '4号楼'
    },
    {
      key: '5',
      name: '行李文',
      address: '周五 08:00~20:00',
      zb: '5号楼'
    },
    {
      key: '6',
      name: '程恒峰',
      address: '周六 08:00~20:00',
      zb: '6号楼'
    },
  ];

  return (
    <>
      <Row style={{ marginLeft: '75px', height: '900px', marginTop: '30px' }}>
        <Col span={6}>
          {/* 监控情况 */}
          <div style={{ width: '95%', height: '300px' }}>
            <div className='ico1'>
              监控情况
            </div>
            <div style={{ width: '100%', border: '1px solid blue', marginTop: '10px', height: '80px' }}>
              <img src="../../../public/icon/1.png" alt="" style={{ height: '90%', marginTop: '4px', marginLeft: '20px', float: 'left', marginRight: '20px' }} />
              <div style={{ lineHeight: '25px' }}>
                <div>1号楼</div>
                <div>设备数量：500</div>
                <div style={{ display: 'flex' }}>
                  <div>正常设备：<span style={{ marginRight: '10px', color: '#0f0' }}>300</span></div>
                  <div>故障设备：<span style={{ color: 'red' }}>200</span></div>
                </div>
              </div>
            </div>
            <div style={{ width: '100%', border: '1px solid blue', marginTop: '10px', height: '80px' }}>
              <img src="../../../public/icon/1.png" alt="" style={{ height: '90%', marginTop: '4px', marginLeft: '20px', float: 'left', marginRight: '20px' }} />
              <div style={{ lineHeight: '25px' }}>
                <div>2号楼</div>
                <div>设备数量：500</div>
                <div style={{ display: 'flex' }}>
                  <div>正常设备：<span style={{ marginRight: '10px', color: '#0f0' }}>300</span></div>
                  <div>故障设备：<span style={{ color: 'red' }}>200</span></div>
                </div>
              </div>
            </div>
            <div style={{ width: '100%', border: '1px solid blue', marginTop: '10px', height: '80px' }}>
              <img src="../../../public/icon/1.png" alt="" style={{ height: '90%', marginTop: '4px', marginLeft: '20px', float: 'left', marginRight: '20px' }} />
              <div style={{ lineHeight: '25px' }}>
                <div>3号楼</div>
                <div>设备数量：500</div>
                <div style={{ display: 'flex' }}>
                  <div>正常设备：<span style={{ marginRight: '10px', color: '#0f0' }}>300</span></div>
                  <div>故障设备：<span style={{ color: 'red' }}>200</span></div>
                </div>
              </div>
            </div>
          </div>
          {/* 门禁情况 */}
          <div style={{ width: '95%', height: '200px', marginTop: '30px' }}>
            <div className='ico1'>
              门禁情况
            </div>
            <div style={{ width: '100%', height: '140px', border: '1px solid blue', marginTop: '10px' }}></div>
          </div>
          {/* 值班情况 */}
          <div style={{ width: '95%', height: '300px', marginTop: '30px' }}>
            <div className='ico1'>
              值班情况
            </div>
            <table className='tab'>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>时间</th>
                  <th>值班内容</th>
                </tr>
              </thead>
              <tbody>
                {
                  data && data.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{index + 1}</td>
                        <td>{item.name}</td>
                        <td>{item.address}</td>
                        <td>{item.zb}</td>
                      </tr>
                    )
                  })
                }
              </tbody>
            </table>
          </div>
        </Col>
        <Col span={9} style={{ marginLeft: '95px' }}>col-8</Col>
        <Col span={6} style={{ marginLeft: '110px' }}>
          <div className='ico1' style={{ width: '90%', height: '50px', marginLeft: '3%' }} colorBgContainer='blue'>
            监控画面
          </div>
          <div style={{ width: '90%', height: '250px', marginLeft: '3%', marginTop: '30px', border: '1px solid blue' }}>
            <Jiankong />
          </div>
          <div style={{ width: '90%', height: '250px', marginLeft: '3%', marginTop: '30px', border: '1px solid blue' }}>
            <Jiankong />
          </div>
          <div style={{ width: '90%', height: '250px', marginLeft: '3%', marginTop: '30px', border: '1px solid blue' }}>
            <Jiankong />
          </div>
        </Col>
      </Row>
    </>
  )
}

export default Hoc_login(Anfang)
